<template>
  <div
    class="resource-step-container w-full h-full overflow-hidden flex justify-start items-center flex-col"
  >
    <div
      class="w-full h-[52px] p-[0_20%] flex justify-between items-center box-border resource-step-title"
    >
      资源基础信息
    </div>
    <div
      class="content-box w-full h-[calc(100%_-_116px)] p-[0_20%] box-border overflow-hidden overflow-y-auto"
    >
      <a-form
        layout="inline"
        :model="handlerData"
        :rules="Rules"
        class="resource-form-container"
        label-align="left"
        ref="RefFormBox"
      >
        <a-row justify="space-between" class="w-full">
          <a-form-item label="资源名称" field="name">
            <a-input placeholder="请输入" v-model="handlerData.name"></a-input>
          </a-form-item>
        </a-row>
        <a-row justify="space-between" class="w-full">
          <a-form-item label="资源编号" field="code">
            <a-input placeholder="请输入" v-model="handlerData.code"></a-input>
          </a-form-item>
        </a-row>
        <a-row justify="space-between" class="w-full form-security-item">
          <a-form-item label="资源密级" field="security_level">
            <a-select placeholder="请选择" v-model="handlerData.security_level" >
              <a-option value="无条件开放">无条件开放</a-option>
              <a-option value="有条件开放">有条件开放</a-option>
              <a-option value="敏感数据">敏感数据</a-option>
              <a-option value="保密数据">保密数据</a-option>
            </a-select>
          </a-form-item>
        </a-row>
        <a-row justify="space-between" class="w-full">
          <a-form-item label="数据应用场景" field="scene">
            <a-select placeholder="请选择"  v-model="handlerData.scene" multiple>
              <a-option value="房地产">房地产</a-option>
              <a-option value="科研">科研</a-option>
              <a-option value="物流">物流</a-option>
              <a-option value="教育">教育</a-option>
              <a-option value="招商">招商</a-option>
              <a-option value="投资">投资</a-option>
              <a-option value="公司内部">公司内部</a-option>
              <a-option value="销售">销售</a-option>
              <a-option value="环境">环境</a-option>
              <a-option value="金融">金融</a-option>
            </a-select>
          </a-form-item>
        </a-row>
        <a-row justify="space-between" class="w-full form-security-item">
          <a-form-item label="数据更新频率" field="update_frequency">
            <a-select placeholder="请输入" v-model="handlerData.update_frequency">
              <a-option value="实时">实时</a-option>
              <a-option value="每日">每日</a-option>
              <a-option value="每周">每周</a-option>
              <a-option value="每月">每月</a-option>
              <a-option value="每季度">每季度</a-option>
              <a-option value="每年">每年</a-option>
            </a-select>
          </a-form-item>
        </a-row>
        <a-row justify="space-between" class="w-full">
          <a-form-item label="数据字段数" field="data_fields_count">
            <a-input-number
              :precision="0"
              :max="1000"
              :min="0"
              placeholder="请输入"
              v-model="handlerData.data_fields_count"
            ></a-input-number>
          </a-form-item>
        </a-row>
        <a-row justify="space-between" class="w-full">
          <a-form-item label="数据浏览量" field="data_browsing_number">
            <a-input-number
              :precision="0"
              placeholder="请输入"
              v-model="handlerData.data_browsing_number"
            ></a-input-number>
          </a-form-item>
        </a-row>
        <a-row justify="space-between" class="w-full">
          <a-form-item label="数据下载量" field="data_download_number">
            <a-input-number
              :precision="0"
              placeholder="请输入"
              v-model="handlerData.data_download_number"
            ></a-input-number>
          </a-form-item>
        </a-row>
        <a-row justify="space-between" class="w-full">
          <a-form-item label="数据调用量" field="data_call_number">
            <a-input-number
              :precision="0"
              placeholder="请输入"
              v-model="handlerData.data_call_number"
            ></a-input-number>
          </a-form-item>
        </a-row>
        <a-row justify="space-between" class="w-full form-security-item">
          <a-form-item label="更新时间" field="data_update_time">
            <!-- <a-input placeholder="请输入" v-model="handlerData.data_update_time" :disabled="true"></a-input> -->
            <a-date-picker
              placeholder="请选择"
              v-model="handlerData.data_update_time"
              show-time
              :time-picker-props="{ defaultValue: '09:09:06' }"
              format="YYYY-MM-DD HH:mm:ss"
              style="width: 100%"
            />
          </a-form-item>
        </a-row>
        <a-row justify="space-between" class="w-full">
          <a-form-item label="资源所属组织" field="owner_org_code">
            <a-select placeholder="请选择" v-model="handlerData.owner_org_code" multiple>
              <template v-for="item in orgs" :key="item.code">
                <a-option :value="item.code">{{ item.org_name }}</a-option>
              </template>
            </a-select>
          </a-form-item>
        </a-row>
        <a-row justify="space-between" class="w-full form-security-item">
          <a-form-item label="数据资源来源" field="from">
            <a-select placeholder="请选择" v-model="handlerData.from">
              <a-option value="外购数据">外购数据</a-option>
              <a-option value="自行产生">自行产生</a-option>
              <a-option value="其它方式">其它方式</a-option>
              <a-option value="公开爬取">公开爬取</a-option>
              <a-option value="公开授权">公开授权</a-option>
            </a-select>
          </a-form-item>
        </a-row>
        <a-row justify="space-between" class="w-full">
          <a-form-item
            label="生产源"
            field="production_resource"
            :hide-asterisk="!(handlerData.is_root == 1)"
          >
            <a-input placeholder="请输入" v-model="handlerData.production_resource"></a-input>
          </a-form-item>
        </a-row>
        <a-row justify="space-between" class="w-full">
          <a-form-item label="是否根资源" class="exception" field="is_root">
            <a-switch
              v-model="handlerData.is_root"
              :checked-value="1"
              :unchecked-value="2"
              :disabled="handlerData.can_change_root === false"
            ></a-switch>
          </a-form-item>
        </a-row>
      </a-form>
    </div>
    <div class="footer-box w-full h-[64px] flex justify-between items-center pl-[24px] pr-[24px]">
      <span></span>
      <span>
        <!-- <a-button>保存为草稿</a-button> -->
        <a-button class="pr-2 ml-2" @click="quit">取消</a-button>
        <a-button type="primary" @click="nextStep(undefined)" class="ml-2">下一步</a-button>
      </span>
    </div>
  </div>
</template>

<script lang="ts" setup>
import * as T from '@/api/assetManagement/assetManagement_type';
import * as Org from '@/api/org';
import { Message } from '@arco-design/web-vue';
import { onMounted, ref, watch, type PropType } from 'vue';
import { Rules, handlerData } from '../values';

const props = defineProps({
  formData: {
    type: Object as PropType<T.TResourceItem>,
    required: true
  }
});
const RefFormBox = ref();
const orgs = ref<Org.TOrgItem[]>([]);
const emits = defineEmits(['update:formData', 'nextStep', 'quit']);
handlerData.value = { ...props.formData };

function nextStep(cb?: any) {
  if (!RefFormBox.value) {
    return;
  }
  RefFormBox.value.validate().then((res) => {
    if (!res) {
      emits('nextStep', { ...handlerData.value } as T.TResourceItem);
      console.log(`[ cb ]=>`, cb);
      cb ? cb() : false;
    }
  });
}
function quit() {
  emits('quit');
}

function getOrgList() {
  Org.getList({
    page: 1,
    page_size: 1e2
  }).then((res) => {
    const { code, errMsg, data } = res;
    if (code === 200 && data) {
      orgs.value = data;
      return;
    }
    Message.warning(errMsg);
  });
}

watch(
  () => props.formData,
  (val) => {
    handlerData.value = { ...val };
    console.log(`[ handlerDatah ]=>`, handlerData.value);
  },
  {
    deep: true
  }
);

defineExpose({
  next(cb?: any) {
    nextStep(cb);
  }
});

onMounted(() => {
  getOrgList();
});
</script>

<style lang="less" scoped>

@common-color:#465A80;
@commmon-border-color: #D3DBEB;

.resource-step-container {
  .resource-step-title {
    font-family: Microsoft YaHei;
    font-size: 16px;
    font-weight: 700;
    color: @common-color;
  }

  .footer-box {
    box-shadow: 0px 0px 6px 0px rgba(57, 77, 115, 0.1);
  }

  .resource-form-container {
    .arco-row {
      .arco-form-item {
        width: 100%;
        margin-top: 6px;
        :deep(.arco-form-item-label-col) {
          width: 120px;
        }
        :deep(.arco-form-item-wrapper-col) {
        }
      }
    }
  }
}


::v-deep {
   .arco-form-item-label{
    color: @common-color;
    font-size: 14px;
  }
  .arco-input-wrapper{
    background-color: #fff;
    border: 1px solid @commmon-border-color;
    width: 328px;
  }
  .arco-select{
    width: 328px;
    background-color: #fff;
    border: 1px solid @commmon-border-color;
    
  }
  .form-security-item .arco-form-item-wrapper-col{
    width: 328px;
  }
  .form-security-item .arco-picker{
    background-color: #fff;
    border: 1px solid @commmon-border-color;
  }
}
</style>
